<template>
  <div id="bg">
    <div class="header">
      <div class="left iconfont icon-gengduo" @click="gotoPerson"></div>
      <div class="center">MUSIC-VUE</div>
      <div class="right iconfont icon-sousuo" @click="search"></div>
    </div>
    <div class="navs">
      <router-link to="/recommend" class="item"><span>推荐</span></router-link>
      <router-link to="/rank" class="item"><span>排行</span></router-link>
      <router-link to="/singer" class="item"><span>歌手</span></router-link>
      <router-link to="/newmv" class="item"><span>MV</span></router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    gotoPerson() {
      this.$emit("gotoPerson", {left:0,show:true});
      // this.$router.push("/person");
    },
    search(){
      this.$router.push("/search");
    }
  },
};
</script>

<style lang="less" scoped>
#bg {
  width: 100%;
  background-color: #d4473c;
  user-select: none;
}
.header {
  height: 40px;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  user-select: none;

  .center {
    flex: 1;
  }
  .left,
  .right {
    flex: 0 0 40px;
  }
}
.navs {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item {
    text-align: center;
    flex: 1;
    width: 33.33%;
    color: #fff;
    font-size: 15px;
    span {
      height: 21px;
      display: inline-block;
      border-bottom: 2px solid transparent;
    }
    &.router-link-active span {
      font-weight: 700;
      border-color: #fff;
    }
  }
}
</style>